<!DOCTYPE html>
<head>
    <title>Report Details</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel='stylesheet' href='./css/bootstrap/bootstrap.min.css' type='text/css'/>
    <link rel='stylesheet' href='./css/main.css' type='text/css'/>
    <link rel='stylesheet' href='./css/iscroll.css' type='text/css'/>
    <!--jquery-->
    <script type="text/javascript" src='./js/lib/jquery/jquery-1.10.2.min.js'></script>
    <script type="text/javascript" src='./js/lib/iscroll/iscroll.js'></script>
    <script type="text/javascript" src='./js/lib/underscore/underscore.min.js'></script>
    <script type="text/javascript" src='./js/lib/backbone/backbone.js'></script>
    <script type="text/javascript" src='./js/lib/fastclick.js'></script>
</head>
<style>
	@font-face{
	   font-family:'Trajan Pro';
	   src:url('file:///android_asset/fonts/TrajanProBold.otf');
	}
	
	html, body {
	    height: 100%;
	    background:#f1f2f7;
	}
		
	.header {
	    left: 0;
	    right: 0;
	    height:60px;
	    z-index: 1002;
		background-color: #050505;
		color: #fff;
	    -webkit-transition: all .3s ease-in-out;
	    -moz-transition: all .3s ease-in-out;
	    -o-transition: all .3s ease-in-out;
	    transition: all .3s ease-in-out;
	}
	.header .brand{
	  float:left;
	}
	.fixed-top {
	    position: fixed;
	    box-shadow: 1px 0 3px rgba(0, 0, 0, .15);
	}
	.top-nav {
      margin-top: 14px;
    }
	ul.top-menu {
	    margin-right: 15px;
	    margin-top: 0;
	}
	
	ul.top-menu > li > a {
	    color: #666666;
	    font-size: 16px;
	    background: #f6f6f6;
	    padding: 4px 8px;
	    margin-right: 15px;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    padding-right: 8px !important;
	}
	
	ul.top-menu>li>a:hover, ul.top-menu>li>a:focus {
	    background: #32D2C9;
	    text-decoration: none;
	    color: rgba(0, 0, 0, 0.3) !important;
	    padding-right: 8px !important;
	}
	
	.top-nav ul.top-menu>li.language ul.dropdown-menu li img {
	    border-radius: 0;
	    -webkit-border-radius: 0;
	    width: 18px;
	}
	
	.top-nav ul.top-menu>li {
	    margin-left: 10px;
	}
	
	.top-nav ul.top-menu>li>a:hover, .top-nav ul.top-menu>li>a:focus {
	    border: 1px solid #f6f6f6;
	    background: #f6f6f6 !important;
	    border-radius: 100px;
	    -webkit-border-radius: 100px;
	}
	
	.top-nav .dropdown-menu.extended.logout {
	    top: 50px;
	}
	
	.top-nav .nav .caret {
	    border-bottom-color: #A4AABA;
	    border-top-color: #A4AABA;
	}
	
	.top-nav ul.top-menu>li>a:hover .caret {
	    border-bottom-color: #000;
	    border-top-color: #000;
	}
	#top_menu .nav>li, ul.top-menu>li {
	    float: left;
	}		
	.container {
	    margin: 0 auto;
	    height: 100%;
	    width:1140px;
	    padding: 80px 0px 100px 0;
	  
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	}
	.wintitle {
		width: 30%;
		margin: 0px auto;
		float: left;
		left:30%;
		position: absolute;
		text-align: center;
	}
	.wintitle h3{
	  font-family: "Trajan Pro"!important;	
	}
	.columns {
	    height: 100%;   
	}
	
	.content-area, .article-tree{
	    overflow:auto;
	    height: 100%;
	}
	.datapanel {
	    overflow:auto;
	    height: 100%;	
	}
	.article-tree {
	  background-color:#fff;
	}
	.content-area {
		background-color: #dff0d8;
		border-color: #d6e9c6;
		color: #3c763d;
	}
	.toggle-right-box {
	    float: left;
	    background: #f6f6f6;
	    border-radius: 50%;
	    -webkit-border-radius: 50%;
	    width: 35px;
	    height: 35px;
	}
	
	.toggle-right-box:hover {
	    background: #32D2C9;
	}
	
	.toggle-right-box:hover .fa-bars {
	    color: rgba(0, 0, 0, 0.3);
	}
	
	.toggle-right-box .fa-bars {
	    cursor: pointer;
	    display: inline-block;
	    font-size: 15px;
	    padding: 10px;
	    color: #bfbfc1;
	}	

	.footer {
	    height: 80px;
		border-color:#eff2f7 ;
		font-size: 13px;
		font-weight: 400;
		background: #f3f3f3;
        box-shadow:0px -1px 3px rgba(0,0,0,.15);	    
	}
	.footer .crosssect {
	 background: #98d7ad;
	}
	.footer .col-md-3 {
	 height:80px;
	}
    .wordWarp{
        word-wrap:break-word
    }
    .reportitemworp{

        border-bottom: 3px solid #fff;
    }
    .summaryitemworp{
        background: #f1f1f1;
        border-bottom: 3px solid #fff;
    }
</style>
<body>
	<header class="header fixed-top clear fix">
		<!--logo start-->
		<div class="brand">
		
		    <div class="sidebar-toggle-box">
                   <div id="backBtn"></div>
		    </div>
		</div>
		<!--logo end-->
		<div class="wintitle">
		<h3 id="reporttitle">报表</h3>
		</div>
		<div class="top-nav clear fix">
		    <!--search & user info start-->
		    <ul class="nav pull-right top-menu">
		        <li>
		         <div>
		           <button type="button" class="btn btn-primary" id="clickPrint">
		            <i class="fa fa-cloud"></i> 打印</button>		         
		         </div>
		        </li>
		    </ul>
		    <!--search & user info end-->
		</div>
	</header>
	<div class="container wrapper">
	  <div class="row columns content"> 
	    <div class="col-md-3 article-tree">
	     <div>
	      <h4>销售分析</h4>
             <div class="row">
                 <div class="col-md-6">类型</div>
                 <div class="col-md-2">数量</div>
                 <div class="col-md-4">合计</div>
             </div>
             <div id="salesAnalysis" class="row">
                 <div id="salesAnalysisWrapper">
                     <div id="salesAnalysisScroller">
                         <ul id="salesAnalysisli">

                         </ul>
                     </div>
                 </div>
             </div>


	     </div>
	     
	    </div>
	    <div class="col-md-3 content-area">
	     <div>
	      <h4>详细分析</h4>
             <div class="row">
                 <div class="col-md-5">项目</div>
                 <div class="col-md-3">数量</div>
                 <div class="col-md-4">合计</div>
             </div>
             <div id="detailAnalysis" class="row">
                 <div id="detailAnalysisWrapper">
                     <div id="detailAnalysisScroller">
                         <ul id="detailAnalysisli">


                         </ul>
                     </div>
                 </div>
             </div>

	     </div>
	    </div>
	    <div class="col-md-3 article-tree">
	     <div>
	      <h4>品类分析</h4>
             <div class="row">
                 <div class="col-md-5">分组</div>
                 <div class="col-md-3">数量</div>
                 <div class="col-md-4">合计</div>
             </div>
             <div id="summaryAnalysis" class="row">
                 <div id="summaryAnalysisWrapper">
                     <div id="summaryAnalysisScroller">
                         <ul id="summaryAnalysisli">
                         </ul>
                     </div>
                 </div>
             </div>


	     </div>
	    </div>
	    <div class="col-md-3 content-area">
	     <div>
	      <h4>时段分析</h4>
             <div class="row">
                 <div class="col-md-5">小时</div>
                 <div class="col-md-3">数量</div>
                 <div class="col-md-4">合计</div>
             </div>
             <div id="hourlySales" class="row">
                 <div id="hourlySalesWrapper">
                     <div id="hourlySalesScroller">
                         <ul id="hourlySalesli">

                         </ul>
                     </div>
                 </div>
             </div>

         </div>
	    </div>    
	  </div>
	
	  <div class="footer row">
	     <div class="col-md-3">
             <div class="row">
                 <div class="col-md-6">总账单</div>
                 <div class="col-md-2"></div>
                 <div class="col-md-4"  id="totalBillValue" ></div>
             </div>
           <!--  <div class="row">
                 <div class="col-md-4">平均消费</div>
                 <div class="col-md-4"></div>
                 <div class="col-md-4 "  id="avgBillValue">2</div>
             </div>-->
             <div class="row">
                 <div class="col-md-6">总零时菜</div>
                 <div class="col-md-2"></div>
                 <div class="col-md-4"  id="totalOpenItemValue"></div>
             </div>

	     </div>
	     <div class="col-md-3 crosssect" id="detailsTotal">



         </div>
	     <div class="col-md-3" id="summaryTotal">

	     </div>
	     <div class="col-md-3 crosssect">
             <div class="row" id="hourlyTotal">
                 <!--      Avg/Hour(13)-->

             </div>
	     </div>
	  </div>
	</div>
<!--
    <script type="text/javascript" src='./js/app/dummy_data.js'></script>
    <script type="text/javascript" src='./js/app/android_dummy.js'></script>
-->
    <script type="text/javascript" src='./js/app/report_cn.js'></script>
</body>
</html>
